<template>
  <div>
      <!-- 头部区域 -->
      <Header></Header>
      <!-- 头部区域 -->

      <!-- 表单区域 -->
      <div class="udlite-container partners">
        <van-cell-group>
              <van-tabs v-model="active">
              <van-tab title='用户名登陆'> 
              <van-field v-model="username" label="用户名:" placeholder="请输入用户名"></van-field>
              </van-tab>
              <van-tab title='手机号登陆'> 
              <van-field v-model="username" label="手机号:" placeholder="请输入用手机号"></van-field>
              </van-tab>
              <van-tab title='邮箱登陆'> 
              <van-field v-model="username" label="邮箱:" placeholder="请输入用邮箱"></van-field>
              </van-tab>
              </van-tabs>
              <van-field v-model="password" label="密码:" placeholder="请输入密码"></van-field>
              <!-- 图片验证码 -->
              <van-cell-group>
                    <img :src="src" @click="changecode" width="300">
                    <van-field v-model="code" label="验证码:" placeholder="请输入验证码"></van-field>
              </van-cell-group>
              <!-- 滑块验证 -->
               <br>
              <van-cell-group>
                  <drag-verify :width="width" :height="height" :text="text" ref="Verify">
                  </drag-verify>  
              </van-cell-group>
              <br>
              <van-button type="primary" @click="login">登 录</van-button>
              
              <van-button type="info" @click="empty">重 置</van-button>
            <br>
            <br>
            <!-- 钉钉登录 -->
            <van-cell-group>
                <img src="http://127.0.0.1:8000/static/dingding.png" alt="" @click="ding" width="100px;">
            </van-cell-group>
            <br>
            <!-- 码云登录 -->
            <van-cell-group>
                <img src="http://127.0.0.1:8000/static/mayun.png" alt="" width="100px;" @click="gitee">
            </van-cell-group>  
        </van-cell-group>
      </div>
      <!-- 尾部区域 -->
      <Footer></Footer>
      <!-- 尾部区域 -->
  </div>
</template>

<script>
import Header from './Header.vue'
import Footer from './Footer.vue'
// 滑块组件
import dragVerify from 'vue-drag-verify'
export default {
    components:{
        'Header':Header,
        'Footer':Footer,
        'dragVerify':dragVerify
    },
    data(){
        return{
            username:'',
            password:'',
            active:0,
            width:320,
            height:42,
            text:"请您拖动滑块",
            code:'',
            token:localStorage.getItem('token'),
            src:'http://127.0.0.1:8000/my_code/',
            ding_url:"http://127.0.0.1:8000/ding/",
            gitee_url:'http://127.0.0.1:8000/gitee/',
        }
    },
    methods:{
        // 登录
        login(){
            if(this.active==0){
                if(this.username==''){
                    this.$toast('用户名不能为空')
                    return false
                }
            }
            if(this.active==1){
                if(this.username==''){
                    this.$toast('手机号不能为空')
                    return false
                }
            }
            if(this.active==2){
                if(this.username==''){
                    this.$toast('邮箱不能为空')
                    return false
                }
            }
            if(this.password==''){
                this.$toast('密码不能为空')
                return false
            }
            if(this.code==''){
                this.$toast('验证码不能为空')
                return false
            }
            if(this.$refs.Verify.isPassing == false){
                this.$toast('请先拖动滑块验证')
                return false
            }
            else{
                this.axios.post('http://127.0.0.1:8000/login/',this.qs.stringify({
                    'username':this.username,
                    'password':this.password,
                    'active':this.active,
                    'code':this.code
                })).then(res=>{
                console.log(res.data)
                console.log(this.username,this.code)
                this.$toast(res.data.msg)
                if(res.data.code==200){
                    localStorage.setItem('username',this.username)
                    localStorage.setItem('token',res.data.token)
                    localStorage.setItem('uid',res.data.uid)
                    // sessionStorage.setItem('code',this.code)
                    this.$router.push({
                        name:'Indexs'
                    })
                }else{
                    this.$toast(res.data.msg)
                }
            })
            }
        },
        // 重置
        empty(){
            this.username = '',
            this.password = '',
            this.code = ''
        },
        // 获取验证码
        changecode(){
            var num = Math.ceil(Math.random()*10);
            this.src = this.src + "?num=" + num
        },
        // 钉钉登录
        ding(){
            window.location.href = this.ding_url
            axios({
                url:'http://127.0.0.1:8000/dingding_back/',
            }).then(res=>{
                console.log(res.data)
            })
        },
        // 码云登录
        gitee(){
            window.location.href = this.gitee_url
        }
    }
}
</script>

<style type="text/css">

</style>